<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>童星 - <?php echo ($config["WEB_SITE_TITLE"]); ?></title>
    <script src="/Public/Home/js/adaptive.js"></script>
    <script src="/Public/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="/Public/Home/css/reset.css">
    <link rel="stylesheet" href="/Public/Home/css/btm.css">
    <link rel="stylesheet" href="/Public/Home/css/swiper-3.4.2.min.css">
    <style>
           .classify{padding-bottom: 2rem;background: #fff;}

        .btm li:nth-child(2) a{color: #01B0B8}

        /*顶部*/
        .top{width: 100%;height: 0.88rem;background: #fff;text-align: center;position: fixed;top:0px;z-index: 100}
        .top h4{text-align: center;height: 0.8rem;background: #01B0B8;color: #fff;font-size: 0.34rem;line-height: 0.8rem}
        .top input{width: 2.89rem;height: 0.55rem;border-radius: 0.3rem;padding-left: 0.1rem;box-sizing: border-box;background:#01B0B8 ;
            font-size: 0.20rem;color: #fff;border: 1px solid #dedede;outline: none;position: absolute;right: 0.1rem;top: 0.1rem;display: none}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #fff;
        }
        .top  img{position: absolute;right: 0.25rem;top:0.16rem;width: 0.4rem;height: 0.4rem;z-index: 100}



        /*列表内容*/
        .content{width: 7.5rem;height: auto;margin: 0 auto;margin-top: 0.88rem;}
        .con-list{width: 100%;height: auto;padding: 0rem 0.3rem;margin-bottom: 1rem;}
        .con-list li{min-height: 1rem;line-height: 1rem;color: #333;font-size: 0.34rem;padding-left: 1rem;position: relative}
        /*.con-list li select {width: 1rem;height: 0.6rem;background:#EEEEEE;text-align: center ;outline:none;;*/
            /*border:none !important;}*/
           .con-list .qb{text-align: center;color: #666;font-size:0.24rem;margin-top: 0.5rem;}
           .con-list .qb img{position: relative;top: -0.05rem}
           .con-list .qb b{color: #333}
           .con-list .hi{display: none}
           .con-list li span{position: absolute;left: 0px;background: #fff;!important;}

           .con-list li a:nth-child(2){background: #01B0B8}
           .con-list .ss2 a:nth-child(2){background: #EEEEEE}
           .con-list li a{width: auto;height: 0.7rem;background: #EEEEEE;text-align: center;line-height: 0.7rem;display: inline-block;
               border-radius: 0.2rem;margin-right: 0.2rem;padding: 0px 0.2rem;}





               /*今日推荐*/
     .tle{text-align: center;font-size: 0.36rem;font-weight: 700;border-top: 1px solid #DEDEDE;height: 1rem;line-height: 1rem;}
        /*左右滑动*/
        .slide-lr{width: 100%;height: 4.5rem;padding: 0.3rem;}

           .swiper_second2  .swiper-slide{width: 4.2rem;position: relative}
        .swiper_second2  .swiper-slide img{width: 4.2rem;height: 2.8rem;}
        .swiper_second2  .swiper-slide p{width: 4.2rem;text-align: center;background: rgba(0,0,0,0.2);height: 0.6rem;position: absolute;
            bottom: 0px;color:#fff;line-height: 0.6rem;}



        /*筛选*/
        .shaixuan{width: 100%;height: 0.7rem;border-bottom: 1px solid #DEDEDE;display: flex;justify-content: space-around;overflow: hidden}
        .shaixuan li{font-size: 0.34rem;color: #333;height: 0.68rem;}
        .sx-show{border-bottom: 2px solid #01B0B8;}

        .sx{width: 100%;height: auto}
        .tj-list{width: 100%;height: auto;padding: 0px 0.3rem;overflow: hidden}
        .tj-list li{width: 50%;height: 4.6rem;float: left;}
        .tj-list li .tj-show{width: 100%;height: 3.6rem;}
        .tj-list li p{font-size: 0.32rem;color: #333;margin-bottom: 0px;padding-right: 0.3rem}
        .tj-list li p img{width: 0.32rem;height: 0.32rem;float: right;margin-left: 0.2rem;}
        .tj-list li nav{display: flex;justify-content: space-between;padding-right: 0.3rem;color: #666}


        .con-list select{background: #DEDEDE;border-radius: 0.1rem;margin: 0px 0.2rem;height: 0.7rem;}
           .con-list b{color: #666;font-size: 0.27rem;}
        #didian{width: 2rem}

    </style>
</head>
<body>

   <div class="classify   pullrefresh mui-scroll-wrapper mui-content">


       <!--底部栏-->
       <ul class="btm">
           <li>
               <a href="<?php echo U('Index/Index');?>">
                   首页
                   <img src="/Public/Home/img/ft1.1.png" alt="">
               </a>
           </li>
           <li>
               <a href="<?php echo U('Index/childStar');?>">
                   童星
                   <img src="/Public/Home/img/ft2.1.png" alt="">
               </a>
           </li>

           <li>
               <a href="<?php echo U('Index/shop');?>">
                   商城
                   <img src="/Public/Home/img/ft3.1.png" alt="">
               </a>
           </li>

           <li>
               <a href="<?php echo U('User/Index');?>">
                   个人
                   <img src="/Public/Home/img/ft4.1.png" alt="">
               </a>
           </li>


       </ul>
       <!--顶部栏-->
      <div class="top">
           <h4>童星</h4>
          <input type="text" placeholder="请输入搜索的内容" class="ssk">
          <img src="/Public/Home/img/fl-sousuo.png" alt="" class="search">
      </div>




       <div class="mui-content content">
          <ul class="con-list">
              <li>
                  <span>年龄</span>
                  <select name="" id="age1" style="width: 1rem;border: 1px solid #DEDEDE">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                  </select>
                  <b>至</b>
                  <select name="" id="age2" style="width: 1rem;border: 1px solid #DEDEDE">
                     <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                  </select>
                  <b>岁</b>
              </li>
              <li>
                  <span>身高</span>
                  <select name="" id="shengao" style="width: 1rem;border: 1px solid #DEDEDE">
                      <option>60</option>
                      <option>70</option>
                      <option>80</option>
                      <option>90</option>
                      <option>10</option>
                  </select>
                  <b>至</b>
                  <select name="" id="shengao2" style="width: 1rem;border: 1px solid #DEDEDE">
                      <option>60</option>
                      <option>70</option>
                      <option>80</option>
                      <option>90</option>
                      <option>10</option>
                  </select>
                  <b>cm</b>
              </li>
              <li class="sex  ss3">
                  <span>性别</span>
                  <a>不限</a>
                  <a>男</a>
                  <a>女</a>
              </li>
              <li>
                  <span>地区</span>
                  <select name="" id="didian" style="width: 2rem;border: 1px solid #DEDEDE">
                      <option selected="selected">请选择市区</option>
                      <option>郑州</option>
                      <option>北京</option>
                      <option>上海</option>
                      <option>深圳</option>
                      <option>广州</option>
                      <option>成都</option>
                      <option>重庆</option>
                  </select>
              </li>
              <li class="hi ss3">
                  <span>视频</span>
                  <a>不限</a>
                  <a>有视屏</a>
              </li>
              <li class="hi ss3">
                  <span>模卡</span>
                  <a>不限</a>
                  <a>有模卡</a>
              </li>
              <li class="hi ss3">
                  <span>国籍</span>
                  <a>不限</a>
                  <a>中国</a>
                  <a>混血</a>
                  <a>外籍</a>
              </li>
              <li class="hi ss2">
                  <span>标签</span>
                  <?php if(is_array($tag)): $i = 0; $__LIST__ = $tag;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><a><?php echo ($vo["title"]); ?></a><?php endforeach; endif; else: echo "" ;endif; ?>
              </li>
              <li class="hi ss2">
                  <span>才艺</span>
                  <?php if(is_array($skill)): $i = 0; $__LIST__ = $skill;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><a><?php echo ($vo["title"]); ?></a><?php endforeach; endif; else: echo "" ;endif; ?> 
              </li>
              <span class="qb spjz"> <b>全部筛选</b> <img src="/Public/Home/img/back-xia.png" alt="" class="jiantou"></span>
          </ul>




           <!--今日推荐-->
           <p class="tle">今日推荐</p>
           <!-- 左右滑动 -->
           <div class="slide-lr">
               <div class=" swiper_second2">
                   <div class="swiper-wrapper">
                       <!--swiper-slide 一项-->
                      <?php if(is_array($today)): $i = 0; $__LIST__ = $today;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><div class="swiper-slide">
                             <a href="#"><img src="<?php echo ($vo["head_pic"]); ?>"></a>
                              <p>vip <span><?php echo ($vo["name"]); ?></span></p>


                         </div><?php endforeach; endif; else: echo "" ;endif; ?>   
                      





                   </div>
                   <!-- Add Pagination -->
                   <!--  <div class="swiper-pagination seconds-pagination"></div> -->
               </div>
           </div>



           <!--筛选-->

           <ul class="shaixuan">
               <li class="sx-show send-ms cat_all">全部</li>
               <li class="send-ms tuijian">小演员推荐</li>
               <li class="send-ms tongmo">童模推荐</li>
               <li class="send-ms zhiming">知名童星</li>
           </ul>


           <div class="sx">
               <ul class="tj-list">
                  <?php if(is_array($list)): $i = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><li>
                         <img src="<?php echo ($vo["head_pic"]); ?>" alt="" class="tj-show">
                         <p><?php echo ($vo["name"]); ?> <img src="/Public/Home/img/h-tubiao1.png" alt=""><img src="/Public/Home/img/h-tubiao2.png" alt=""></p>
                         <nav><span><?php echo ($vo["age"]); ?>岁</span> <span><?php echo ($vo["height"]); ?>cm</span> <span><?php echo ($vo["weight"]); ?>kg</span></nav>
                     </li><?php endforeach; endif; else: echo "" ;endif; ?>   
               </ul>
           </div>
       </div>


   </div>


<script src="/Public/Home/js/jquery-1.11.1.js"></script>
<script src="/Public/Home/js/swiper-3.4.2.min.js"></script>
<script src="/Public/Home/layer_m/layer.js"></script>
<script type="text/javascript">
  var tj='';
  var tm='';
  var zm='';
  var cart=0;
  $(".tuijian").click(function(){
       //tj=1;
       cart=1
  })

  $(".tongmo").click(function(){
       // tm=1;
       cart=2
  })

  $(".zhiming").click(function(){
       // zm=1;
       cart=3
  })

  $(".send-ms").click(function(){
    var html='';
    var start=layer.open({type: 2});
    $(".tj-list").find("li").remove();
      $.ajax({
        url:"<?php echo U('Index/getChild');?>",
        dataType:'json',
        method:'post',
        data:{
          cart:cart
        },
        success:function(data){
              layer.open({
                    content: data.msg
                    ,skin: 'msg'
                    ,time: 1 //2秒后自动关闭
                  });
              data=data.data;
              for (var i = 0; i < data.length; i++) {
                html=html+"<li><img src='"+data[i].head_pic+"' alt= class='tj-show'  style='height:190px' ><p>"+data[i].name+"<img src='/Public/Home/img/h-tubiao1.png' ><img src='/Public/Home/img/h-tubiao2.png'></p><nav><span>"+data[i].age+"岁</span> <span>"+data[i].height+"cm</span> <span>"+data[i].weight+"kg</span></nav></li>"
              }
              $(".tj-list").append(html);
              layer.close(start)
            console.log(data);
        }
      })
  })
</script>

<script>
$(".search").click(function () {
    $(".ssk").show();
})
$(".shaixuan li").click(function() {
    $(this).addClass("sx-show").siblings().removeClass("sx-show");

})
//    点击宣布筛选
    $(".qb").click(function () {
        console.log($(this));

        let stu5=$(".hi").css("display")
        if(stu5=="none"){
            $(this).find("img").css("transform","rotate(180deg)")
            $(this).find("b").html("收起")
            $(".hi").show();
        }else{
            $(this).find("img").css("transform","rotate(0deg)")
            $(this).find("b").html("全部筛选")
            $(".hi").hide();
        }

    })

//    点击选择
    $(".con-list .ss3 a").click(function () {
        console.log($(this))
        $(this).css("background","#01B0B8").siblings("a").css("background","#eeeeee");
    })
//    点击选择
$(".con-list .ss2 a").click(function () {

   let flag= $(this).css("background");
    console.log(flag);
    if(flag=="#01B0B8"){
        $(this).css("background","#eeeeee")
    }else{
        $(this).css("background","#01B0B8")
    }

})

</script>
<script>
    var swiper2 = new Swiper('.swiper_second2', {
        slidesPerView: 1.5,


        centeredSlides: false,
        // 如果需要分页器


    });
</script>
</body>
</html>